<template>
    <div class="platform-mgt">
        <!-- 信息页面 -->
        <div class="mgt-top">
            <!-- 基础信息 -->
            <div class="info">
                <div class="header-img">
                    <image-preview :src="agencyInfo.avatarImage" :width="108" :height="108"
                        style="border-radius:50%;"></image-preview>
                </div>
                <div class="material-info">
                    <div class="material-name">{{ agencyInfo.organizationName }}</div>
                    <div class="address">
                        {{ agencyInfo.address }} | 成立于{{ parseTime(agencyInfo.foundingYears, "{y}-{m}-{d}") }}
                    </div>
                </div>
            </div>
            <!-- 信息统计 -->
            <div class="work">
                <div class="count-box">
                    <div class="title">入驻设计师</div>
                    <div class="num title">{{ total || 0 }}</div>
                </div>
                <div class="count-box">
                    <div class="title">作品总数</div>
                    <div class="num title">{{ agencyInfo.schemeNum || 0 }}</div>
                </div>
                <!-- <div class="count-box">
                    <div class="title">点赞总数</div>
                    <div class="num title">9999999999</div>
                </div> -->
            </div>
        </div>
        <!-- 设计师管理部分 -->
        <div class="material-bottom">
            <my-tag title="设计师管理" :showSortImg="false">
                <div class="mgt-bottom-sort">
                    <el-input v-model="queryParams.designerName" placeholder="搜索设计师名称" size="small" clearable
                        @keyup.enter="handleQuery" @clear="clear" style="width: 200px"></el-input>
                    <el-dropdown trigger="click" @command="handleCommand">
                        <span><i class="iconfont icon-sort"></i>调整排序</span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="decor_designer.designer_id&desc">
                                    <div :class="adjustSort === 'decor_designer.designer_id&desc' ? 'adjust-sort' : ''">
                                        按创建时间降序</div>
                                    <el-icon v-show="adjustSort === 'decor_designer.designer_id&desc'" color="#F28472"
                                        class="no-inherit" style="margin-left:10px;"><Select /></el-icon>
                                </el-dropdown-item>
                                <el-dropdown-item command="decor_designer.designer_id&asc">
                                    <div :class="adjustSort === 'decor_designer.designer_id&asc' ? 'adjust-sort' : ''">
                                        按创建时间升序</div>
                                    <el-icon v-show="adjustSort === 'decor_designer.designer_id&asc'" color="#F28472"
                                        class="no-inherit" style="margin-left:10px;"><Select /></el-icon>
                                </el-dropdown-item>
                                <el-dropdown-item command="decor_designer.likes&desc">
                                    <div :class="adjustSort === 'decor_designer.likes&desc' ? 'adjust-sort' : ''">按点赞数降序
                                    </div>
                                    <el-icon v-show="adjustSort === 'decor_designer.likes&desc'" color="#F28472"
                                        class="no-inherit" style="margin-left:10px;"><Select /></el-icon>
                                </el-dropdown-item>
                                <el-dropdown-item command="decor_designer.likes&asc">
                                    <div :class="adjustSort === 'decor_designer.likes&asc' ? 'adjust-sort' : ''">按点赞数升序
                                    </div>
                                    <el-icon v-show="adjustSort === 'decor_designer.likes&asc'" color="#F28472"
                                        class="no-inherit" style="margin-left:10px;"><Select /></el-icon>
                                </el-dropdown-item>
                                <el-dropdown-item command="decor_designer.workYears&desc">
                                    <div :class="adjustSort === 'decor_designer.workYears&desc' ? 'adjust-sort' : ''">
                                        按从业年限降序
                                    </div>
                                    <el-icon v-show="adjustSort === 'decor_designer.workYears&desc'" color="#F28472"
                                        class="no-inherit" style="margin-left:10px;"><Select /></el-icon>
                                </el-dropdown-item>
                                <el-dropdown-item command="decor_designer.workYears&asc">
                                    <div :class="adjustSort === 'decor_designer.workYears&asc' ? 'adjust-sort' : ''">按从业年限升序
                                    </div>
                                    <el-icon v-show="adjustSort === 'decor_designer.workYears&asc'" color="#F28472"
                                        class="no-inherit" style="margin-left:10px;"><Select /></el-icon>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </my-tag>
            <div class="material-box">
                <div v-if="total > 0" v-loading="loading" class="material-con" v-for="v in designerListData"
                    :key="v.designerId" @click="goDetail(v.designerId)">
                    <div class="info">
                        <div class="header-img">
                            <image-preview :src="v.avatarImage" :width="78" :height="78"
                                style="border-radius:50%;"></image-preview>
                        </div>
                        <div class="base-info">
                            <div class="name-box">
                                <div class="name"><span class="set-top" v-show="v.isTop">置顶</span>{{ v.designerName }}</div>
                                <div><el-image :src="level1" style="width:16px;height:16px;margin-top: 6px;"></el-image>
                                </div>
                            </div>
                            <div class="address">{{ v.position }} | 从业{{ v.workYears }}</div>
                            <div class="detail">{{ v.tel }}</div>
                            <div class="author">
                                <div class="author-work">作品<span>{{ v.schemeNum }}</span></div>
                                <div class="author-thumbs">获赞<span>{{ v.likes }}</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="material-box-box">
                        <div class="material-box-img">
                            <image-preview class="el-image-img" v-for="value in v.imageListUrl" :key="value.ossId"
                                :src="value.url"></image-preview>
                        </div>
                        <div class="material-handel">
                            <div class="handel setTop" @click.stop="setTopWorkHandel(v)" v-show="v.isTop === false">
                                <i class="iconfont icon-setTop"></i>置顶设计师
                            </div>
                            <div class="handel" @click.stop="cancelSetTopWorkHandel(v)" v-show="v.isTop === true">
                                <i class="iconfont icon-cancelTop"></i>取消置顶
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else class="empty-list-box">暂无数据</div>
                <pagination style="margin-bottom:60px;margin-top:0px" v-show="total > 0" :total="total"
                    v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDesignerList(agencyInfo.organizationId)" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { getImgUrl } from '@/api/decor/designer.js'
import { getPlatformDesignerList, getAuthenticationAgency, editPlatformDesigner } from '@/api/decor/designAgency.js'
import level1 from '../../../assets/images/baseImage/ico_bronze-medal.png'
const router = useRouter();
const { proxy } = getCurrentInstance();
const agencyInfo = ref({})
const adjustSort = ref('decor_designer.designer_id&desc')
const total = ref(0)
const loading = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    designerName: null,
})
const designerListData = ref([])
// 获取机构信息
const getAgencyData = () => {
    getAuthenticationAgency().then((res) => {
        const data = res
        let designerPromises = []
        res.avatarImage = ''
        if (data.avatar) {
            let promise = getImgUrl(data.avatar).then((res) => {
                data.avatarImage = res.data[0].url;
            });
            designerPromises.push(promise);
        }
        Promise.all(designerPromises).then(() => {
            agencyInfo.value = data;
            getDesignerList(agencyInfo.value.organizationId)
        });
    })
}
// 获取数据列表
const getDesignerList = (organizationId) => {
    loading.value = true
    getPlatformDesignerList({
        ...queryParams.value, 
        orderByColumn: adjustSort.value.split('&')[0],
        isAsc: adjustSort.value.split('&')[1],
        organizationId: organizationId
    }).then((response) => {
        let designerPromises = [];
        let data = response.rows.map((v) => {
            return { ...v, imageListUrl: '', avatarImage: '' }
        })
        data.forEach((v) => {
            if (v.avatarId) {
                let promise = getImgUrl(v.avatarId).then((res) => {
                    v.avatarImage = res.data[0].url;
                });
                designerPromises.push(promise);
            }
            if (v.imgIds && v.imgIds.length > 0) {
                let promise = getImgUrl(v.imgIds).then((res) => {
                    v.imageListUrl = res.data;
                });
                designerPromises.push(promise);
            }

        })
        Promise.all(designerPromises).then(() => {
            designerListData.value = data;
            total.value = response.total;
            loading.value = false;
        });
    })
}
// 搜索按钮操作
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getDesignerList(agencyInfo.value.organizationId);
}
const clear = () => {
    queryParams.value.keywords = null
    getDesignerList(agencyInfo.value.organizationId)
}
// 排序
const handleCommand = (command) => {
    adjustSort.value = command
    getDesignerList(agencyInfo.value.organizationId)
}
// 置顶
const setTopWorkHandel = (v) => {
    const data = {
        designerId: v.designerId,
        isTop: true,
        version: v.version
    }
    proxy.$modal.confirm('是否确认置顶设计师："' + v.designerName + '"？').then(function () {
        return editPlatformDesigner(JSON.stringify(data));
    }).then(() => {
        getDesignerList(agencyInfo.value.organizationId);
        proxy.$modal.msgSuccess("置顶成功");
    }).catch(() => { });
}
// 取消置顶
const cancelSetTopWorkHandel = (v) => {
    const data = {
        designerId: v.designerId,
        isTop: false,
        version: v.version
    }
    proxy.$modal.confirm('是否确认置顶设计师："' + v.designerName + '"？').then(function () {
        return editPlatformDesigner(JSON.stringify(data));
    }).then(() => {
        getDesignerList(agencyInfo.value.organizationId);
        proxy.$modal.msgSuccess("取消成功");
    }).catch(() => { });
}
const goDetail = (designerId) => {
    router.push('/designAgency/agencyDesignerDetail/' + designerId)
}
getAgencyData()
</script>
<style lang="scss" scoped>
:deep(.el-dropdown) {
    border: 1px solid #E1E6ED;
    text-align: center;
    line-height: 36px;
    border-radius: 8px;
    margin-left: 10px;
    padding: 0 10px;
    cursor: pointer;
}

:deep(.el-dropdown-menu__item) {
    padding: 6px 24px;
    text-align: left;

    .adjust-sort {
        color: #F28472;
    }
}

:deep(.pagination-container .el-pagination) {
    position: absolute;
    right: 46px;
}
</style>